<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="/ui/pc/css/bootstrap.min.css" rel="stylesheet"/>

    <link rel="stylesheet" href="/ui/bootstrapIcon/font/bootstrap-icons.min.css">
    <link href="/ui/pc/css/cross.css" rel="stylesheet"/>
    <link href="/ui/pc/css/change.css" rel="stylesheet"/>
    <link href="/ui/pc/css/style.css" rel="stylesheet"/>
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow: hidden;">
<div class="row">
    <div data-widget="indexHead"></div>
</div>
<div style="height:100%">
    <nav class="navbar-default navbar-static-side" style="height:calc(100vh - 60px); overflow: auto" role="navigation">
        <div class="sidebar-collapse">
            <div data-widget="navigation"></div>
        </div>
    </nav>
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="row" data-widget="iframeWidget" style="height: calc(100vh - 60px); overflow: hidden"></div>
    </div>
</div>

<script src="/ui/pc/js/jquery.min.js?v=2.1.4"></script>
<script src="/admin/public/util.js"></script>

<script src="/admin/public/getIndexHead.js"></script>
<script src="/admin/public/getIndexNavigation.js"></script>
<script>
    const {target} = $.getPageParam();

    $('[data-widget="indexHead"]').replaceWith(getIndexHead());

    const $navigationWidget = $('[data-widget="navigation"]');
    const $iframeWidget = $('[data-widget="iframeWidget"]');

    const $navWidget = getIndexNavigation({
        currUrl: target,
        callback: (url) => {
            const $iframeDom = $(`<iframe width="100%" height="100%" src="${url}" style="border: 0"></iframe>`);
            $iframeWidget.html($iframeDom);
            history.pushState(null, null, $.sUrl(location.href, {
                target: url
            }));
        }
    })

    $navigationWidget.replaceWith($navWidget);


    //首页调整尺寸的时候，缩放导航
    resizeIndex()
    $(window).bind("load resize", function () {
        resizeIndex()
    });

    function resizeIndex() {
        if ($(window).width() < 769) {
            $('body').addClass('mini-navbar');
            $('.navbar-static-side').fadeIn();
        } else {
            $('body').removeClass('mini-navbar');
        }
    }

</script>

</body>
</html>